<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';

import { onMounted, ref } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

import { getOrderStatistics } from '#/api/home';

const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);

onMounted(() => {
  getOrderStatistics({}).then((response) => {
    renderEcharts({
      grid: {
        bottom: 0,
        containLabel: true,
        left: '1%',
        right: '1%',
        top: '2 %',
      },
      legend: { data: ['微信收款', '支付宝收款'], right: 0 },
      series: [
        {
          areaStyle: {},
          data: response.map((item: any) => item.wxCount),
          itemStyle: {
            color: '#5ab1ef',
          },
          smooth: true,
          type: 'line',
        },
        {
          areaStyle: {},
          data: response.map((item: any) => item.aliCount),
          itemStyle: {
            color: '#019680',
          },
          smooth: true,
          type: 'line',
        },
      ],
      tooltip: {
        axisPointer: {
          lineStyle: {
            color: '#019680',
            width: 1,
          },
        },
        trigger: 'axis',
      },
      // xAxis: {
      //   axisTick: {
      //     show: false,
      //   },
      //   boundaryGap: false,
      //   data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
      //   type: 'category',
      // },
      xAxis: {
        axisTick: {
          show: false,
        },
        boundaryGap: false,
        data: response.map((item: any) => item.date),
        splitLine: {
          lineStyle: {
            type: 'solid',
            width: 1,
          },
          show: true,
        },
        type: 'category',
      },
      yAxis: [
        {
          axisTick: {
            show: false,
          },
          splitArea: {
            show: true,
          },
          splitNumber: 4,
          type: 'value',
        },
      ],
    });
  });
});
</script>

<template>
  <EchartsUI ref="chartRef" />
</template>
